<template>
    <div class="rootBox">
        <Echarts class="echarts" :options="options" />
        <div class="decorate"></div>
    </div>
</template>

<script>
import Echarts from "./index";
export default {
    components: {
        Echarts,
    },
    props: {
        recive: {
            // type: Object,
        },
    },
    computed: {
        options() {
            var data = [];
            var color = [
                {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#054B96",
                        },
                        {
                            offset: 1,

                            color: "#05F9F7",
                        },
                    ],
                },
                {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#13E1B5",
                        },
                        {
                            offset: 1,

                            color: "#05FAF8",
                        },
                    ],
                },
                {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#FF665A",
                        },
                        {
                            offset: 1,

                            color: "#FF965A",
                        },
                    ],
                },
                {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#FF675A",
                        },
                        {
                            offset: 1,

                            color: "#9B66FD",
                        },
                    ],
                },
                {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#FEFF0A",
                        },
                        {
                            offset: 1,

                            color: "#E19A32",
                        },
                    ],
                },
            ];
            for (var i = 0; i < this.recive.length; i++) {
                data.push(
                    {
                        value: this.recive[i].value,
                        name: this.recive[i].name,
                        itemStyle: {
                            // normal: {
                            borderWidth: 5,
                            // shadowBlur: 20,
                            color: this.recive[i].color,
                            // borderColor: color[i],
                            // shadowColor: color[i],
                            // },
                        },
                    },
                    {
                        value: 2,
                        name: "",
                        itemStyle: {
                            // normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            color: "rgba(0, 0, 0, 0)",
                            borderColor: "rgba(0, 0, 0, 0)",
                            borderWidth: 0,
                            // },
                        },
                    },
                );
            }
            var seriesOption = [
                {
                    name: "",
                    type: "pie",
                    clockwise: false,
                    radius: [65, 75],
                    // : false,
                    emphasis: {
                        scale: false,
                    },
                    labelLine: false,
                    itemStyle: {
                        borderRadius: 5,
                        // label: {
                        //     show: true,
                        //     position: "outside",
                        //     color: "#ddd",
                        //     formatter: function(params) {
                        //         var percent = 0;
                        //         var total = 0;
                        //         for (var i = 0; i < trafficWay.length; i++) {
                        //             total += trafficWay[i].value;
                        //         }
                        //         percent = ((params.value / total) * 100).toFixed(0);
                        //         if (params.name !== "") {
                        //             return (
                        //                 "交通方式：" +
                        //                 params.name +
                        //                 "\n" +
                        //                 "\n" +
                        //                 "占百分比：" +
                        //                 percent +
                        //                 "%"
                        //             );
                        //         } else {
                        //             return "";
                        //         }
                        //     },
                        // },
                    },
                    data: data,
                },
            ];
            return {
                // backgroundColor: "#0A2E5D",
                color: color,
                // title: {
                //     text: "交通方式",
                //     top: "48%",
                //     textAlign: "center",
                //     left: "49%",
                //     textStyle: {
                //         color: "#fff",
                //         fontSize: 22,
                //         fontWeight: "400",
                //     },
                // },
                // graphic: {
                //     elements: [
                //         {
                //             type: "image",
                //             z: 3,
                //             style: {
                //                 // image: img,
                //                 width: 178,
                //                 height: 178,
                //             },
                //             left: "center",
                //             top: "center",
                //             position: [100, 100],
                //         },
                //     ],
                // },
                tooltip: {
                    show: false,
                },
                // legend: {
                //     icon: "circle",
                //     orient: "horizontal",
                //     // x: 'left',
                //     data: ["火车", "飞机", "客车", "轮渡"],
                //     right: 340,
                //     bottom: 150,
                //     align: "right",
                //     textStyle: {
                //         color: "#fff",
                //     },
                //     itemGap: 20,
                // },
                // toolbox: {
                //     show: false,
                // },
                series: seriesOption,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.rootBox {
    width: 100%;
    height: 100%;
    position: relative;
    .echarts {
        width: 100%;
        height: 100%;
        // border: 1px solid red;
    }
    .decorate {
        width: 128px;
        height: 128px;
        // border: 1px solid red;
        background: url("../../asset/image/group/circle-inner.png");
        background-size: cover;
        position: absolute;
        top: 53px;
        left: 22px;
    }
}
</style>
